<template>
  <div class="qTime_rule">
    <el-dialog
      title="设置Q'Time"
      :visible.sync="dialogVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      customClass="mes_dialog">
      <div class="table_container">
        <el-table
          :data="qTimeRules"
          border
          tooltip-effect="dark"
          class="table_dialog">
          <el-table-column
            prop="sort"
            label="工序序号"
            show-overflow-tooltip
            width="80px"
            align="center">
          </el-table-column>
          <el-table-column
            prop="workstageNumber"
            label="工序编号"
            show-overflow-tooltip
            width="150px"
            align="center">
          </el-table-column>
          <el-table-column
            prop="workstageName"
            label="工序名称"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="Q`Time"
            :resizable="false">
            <el-table-column
              align="select"
              :resizable="false"
              width="70">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.qtimeRule"
                  placeholder="规则">
                  <el-option
                    v-for="item in qTimeRuleOptions"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              width="80"
              :resizable="false"
              align="input">
              <template slot-scope="scope">
                <el-input
                  v-model.trim="scope.row.qTimeRuleNumber"
                  v-positive-int
                  v-if="scope.row.qtimeRule!=='无'"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column
              width="70"
              :resizable="false"
              class-name="cell_no_padding"
              align="center">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.qTimeRuleUnit"
                  v-if="scope.row.qtimeRule!=='无'"
                  placeholder="单位">
                  <el-option
                    v-for="item in qTimeRuleUnit"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="mes_btn">
        <el-button type="primary" @click="handleSubmit">提 交</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/**
 * @author liubaohui
 */
// store模块名称
let storeModule = 'technicalConfirm'
export default {
  name: 'QTimeRule',
  data() {
    return {
      dialogVisible: false,
      qTimeRules: [],
      qTimeRuleOptions: [
        {value: '无'},
        {value: '\u2265'},
        {value: '\u2264'}
      ],
      qTimeRuleUnit: [
        {value: '小时'},
        {value: '分钟'},
        {value: '天'},
      ]
    }
  },
  computed: {
    // 工艺列表
    workStageList() {
      return this.$store.state[storeModule].processDetail.workorderWorkstageList || []
    }
  },
  methods: {
    /**
     * 显示弹窗并接收传值
     */
    openDialog(workorderId) {
      this.dialogVisible = true
      this.init(workorderId)
    },
    /**
     * 获取详情
     */
    init(workorderId) {
      let commitObj = {
        method: 'get',
        url: `a/workorder/workorder/getworkorder/${workorderId}`,
        module: storeModule,
        state: 'processDetail'
      }
      this.$store.dispatch('saveData', commitObj)
        .then(() => {
          this.getQTimeRule()
        })
    },
    // 分割字符串获取QTimeRule
    getQTimeRule() {
      let workStageList = JSON.parse(JSON.stringify(this.workStageList))
      workStageList.map(val => {
        if (val.qtimeString !== '' && val.qtimeString !== undefined) {
          val.qTimeRuleNumber = val.qtimeString.split(',')[0]
          val.qTimeRuleUnit = val.qtimeString.split(',')[1]
        } else {
          val.qTimeRuleNumber = ''
          val.qTimeRuleUnit = ''
        }
        if (val.qtimeRule === undefined) val.qtimeRule = '无'
      })
      this.qTimeRules = workStageList
    },
    getSaveData() {
      this.qTimeRules.map(val => {
        if (val.qtimeRule === '无') {
          val.qtimeString = ''
          val.qtime = 0
        } else {
          val.qtimeString = val.qTimeRuleNumber + ',' + val.qTimeRuleUnit
          if (val.qTimeRuleUnit === '分钟') {
            val.qtime = val.qTimeRuleNumber * 1
          }
          if (val.qTimeRuleUnit === '小时') {
            val.qtime = val.qTimeRuleNumber * 60
          }
          if (val.qTimeRuleUnit === '天') {
            val.qtime = val.qTimeRuleNumber * 1440
          }
        }
      })
      return this.qTimeRules
    },
    // 检查QTime值和单位
    checkQTimeRules() {
      return this.qTimeRules.every(value => {
        if (value.qtimeRule === '无') return true
        let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
        if (!reg.test(value.qTimeRuleNumber)) {
          this.$message.error({
            message: 'QTime只能为正数',
            duration: 1500,
            center: true
          })
          return false
        }
        if (value.qTimeRuleUnit === '' || value.qTimeRuleUnit === undefined) {
          this.$message.error({
            message: '请选择QTime单位',
            duration: 1500,
            center: true
          })
          return false
        }
        return true
      })
    },
    // 保存QTime
    handleSubmit() {
      if (!this.checkQTimeRules()) return
      this.saveQTimeRules()
    },
    saveQTimeRules() {
      this.$store.commit('SetConfirmProcessStageList', this.getSaveData())
      let commitObj = {
        method: 'post',
        url: 'a/workordertechproc/workorderTechProc/saveWorkorderTechProc',
        data: this.$store.state[storeModule].processDetail,
        noCommit: true
      }
      this.$store.dispatch('saveData', commitObj).then(() => {
        this.saveSuccess()
      })
    },
    saveSuccess() {
      this.$message.success({
        message: '保存成功',
        duration: 1500,
        center: true,
        onClose: () => {
          this.dialogVisible = false
          this.$emit('submitSuccess')
        }
      })
    },
  }
}
</script>

<style lang="less">
  .qTime_rule {
    .el-table thead {
      tr:last-of-type {
        display: none;
      }
    }
    .mes_dialog {
      width: 600px;
    }
    td.cell_no_padding .cell{
      background-color: #f5f7fa;
      .el-input{
        background-color: #fff;
      }
    }
    td.is-input .cell {
      padding: 0 !important;
      background-color: #f5f7fa;
      .el-input__inner {
        background-color: #ffffff !important;
        height: 100% !important;
        position: absolute;
        top: 0;
        left: 0;
        &.error_input {
          color: @mesTableInputEFC;
        }
        &:focus {
          border: @mesTableInputFBorder;
        }
      }
    }
  }

  td.is-select .cell {
    padding: 0 !important;
    .el-input__inner {
      padding: 0 10px !important;
    }
  }
</style>
